<template>
	<view class="container">
		<view class="hor-layout" style="padding: 10px;">
			<input class="input-view" v-model="inputValue" placeholder="请输入" />
			<button type="primary" size="mini" @click="sendMsgClick">发送</button>
		</view>
		<block v-for="(item,index) in chatValues">
			<view>{{item}}</view>
		</block>
	</view>
</template>

<script>
	import socket from "@/common/socketio.js"
	export default {
		data() {
			return {
				inputValue: '',
				chatValues: []
			}
		},
		onLoad() {
			this.socketListen()
		},
		methods: {
			sendMsgClick(e) {
				let inputText = this.inputValue
				socket.emit("chat message", inputText);
				this.inputValue = ""
			},
			socketListen() {
				socket.on("chat message", (param) => {
					console.log("server accept success:", param);
					let chatValues = this.chatValues
					chatValues.push(param)
					this.chatValues = chatValues
				});
			}
		}
	}
</script>

<style>
	.input-view {
		width: 200px;
		padding: 5px 10px;
		border-radius: 5px;
		border: #1485EE solid 1px;
	}
</style>
